<template>
<div class="address-detail">
    <div class="input_field">
        <van-field :value="address.name" @blur="changeName" required clearable label="姓名" placeholder="收货人姓名" right-icon="user-o" />
    </div>
    <div class="input_field">
        <van-field :value="address.tel" @blur="changeTel" required clearable label="电话" placeholder="收货人电话" right-icon="phone-o" />
    </div>
    <div class="input_field">
        <van-field :value="address.province + address.city + address.district" required clearable label="地区" placeholder="选择地区" @focus="showPopup" right-icon="location-o" />
    </div>
    <div class="input_field">
        <van-field :value="address.addressDetail" @blur="changeDetail" autosize type="textarea" required clearable label="详细地址" placeholder="详细地址" maxlength="300" show-word-limit />
    </div>
    <div class="input_field">
        <van-cell center title="设为默认">
            <van-switch v-model="checked" size="25px" @click="setDefault($event)" />
        </van-cell>
    </div>
    <div class="input_field">
        <van-field :value="address.tag" v-model="addressBadge" @blur="changeBadge" autosize required clearable label="地址标签" placeholder="地址标签" right-icon="label-o" />
        <van-row>
            <van-col span="4" offset="1">
                <p class="badge" @click.stop="getBadge($event,'家')">家</p>
            </van-col>
            <van-col span="4" offset="1">
                <p class="badge" @click.stop="getBadge($event,'公司')">公司</p>
            </van-col>
            <van-col span="4" offset="1">
                <p class="badge" @click.stop="getBadge($event,'其他')" value="其他">其他</p>
            </van-col>
        </van-row>
    </div>
    <div class="input_field">
        <van-button type="primary" size="large" @click="save">提交</van-button>
    </div>
    <div class="input_field">
        <van-button type="danger" size="large" @click="remove">删除</van-button>
    </div>
    <van-popup :show="showAreaPopup" :close="onClose" position="bottom">
        <van-area :area-list="areaList" :columns-placeholder="placeholder" title="选择地区" @cancel="onCancel" @confirm="onConfirm" />
    </van-popup>

</div>
</template>

<script>
import areaData from './area.js'

export default {
    data() {
        return {
            addressName: '',
            areaList: areaData,
            placeholder: ['请选择', '请选择', '请选择'],
            checked: false,
            address: {
                province: '',
                city: '',
                district: '',
                areaCode: '',
                addressDetail: '',
                name: '',
                tel: '',
                tag: '',
                isDefault: false
            },
            id: '',
            phone: '',
            addressBadge: "",
            showAreaPopup: false
        }
    },
    onShow() {

    },
    computed: {
        getAddress() {
            if (this.address.province) {
                return this.address.province + this.address.city + this.address.district
            }
            return ''
        }
    },
    onLoad(options) {
        this.id = options.id
        if (this.id) {
            this.init()
        } else {
            this.reset()
        }
    },
    methods: {
        getBadge(e, content) {
            this.addressBadge = content;
            this.address.tag = content;
        },
        changeBadge(e) {
            this.address.tag = e.mp.detail.value;
        },
        setDefault(e) {
            if (this.checked) {
                wx.showToast({
                    title: '取消默认', //提示的内容,
                    icon: 'none', //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                });
                this.checked = false;
                this.address.default = false;
            } else {
                this.address.default = true;
                wx.showToast({
                    title: '设为默认', //提示的内容,
                    icon: 'success', //图标,
                    duration: 2000, //延迟时间,
                    mask: true, //显示透明蒙层，防止触摸穿透,
                });

                this.checked = true;
            }

        },
        init() {
            if (this.id) {
                this.$API.get('user/address/' + this.id).then(res => {
                    console.log('res', res)
                    this.address = res.data
                })
            }
        },
        reset() {
            this.address = {
                province: '',
                city: '',
                district: ''
            }
        },
        showPopup() {
            this.showAreaPopup = true
        },
        onClose(e) {
            this.showAreaPopup = false
        },
        onCancel() {
            this.showAreaPopup = false
        },
        onConfirm(e) {
            console.log(e)
            const params = e.mp.detail.values
            const province = params[0].name
            const city = params[1].name
            const district = params[2].name
            const areaCode = params[2] ? params[2].code : undefined
            if (areaCode === '') {
                wx.showToast({
                    title: '请选择完整地址',
                    icon: 'warn'
                })
            }
            const tag = params[3]
            this.address.province = province
            this.address.city = city
            this.address.district = district
            this.address.areaCode = areaCode
            this.showAreaPopup = false
        },
        changeName(e) {
            this.address.name = e.mp.detail.value
        },
        changeTel(e) {
            this.address.tel = e.mp.detail.value
        },
        changeDetail(e) {
            this.address.addressDetail = e.mp.detail.value
        },
        save() {
            console.log(this.address);
            this.$API.post('user/address/save', this.address).then(res => {
                wx.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
                wx.navigateBack({
                    delta: 1
                })
            })
        },
        remove() {
            this.$API.delete('user/address/' + this.address.id).then(res => {
                wx.showToast({
                    title: '删除成功',
                    icon: 'success'
                })
                wx.navigateBack({
                    delta: 1
                })
            })
        }
    }
}
</script>

<style>
body {
    background-color: #dce4e4;
}

.input_field {
    margin: 20px 0;
}

.badge {
    padding: 5px;
    text-align: center;
    margin: 10px 2px;
    border-radius: 10px;
    background-color: #FF0000;
    color: white;
}
</style>
